<template>
  <div class="category-article-list boxs">
    <div class="right">
      <h2>{{ currentCategoryName }} 文章列表</h2>

      <div
        class="article-item"
        v-for="article in articleList"
        :key="article.id"
      >
        <router-link :to="`/about/article/${article.id}`">
          <h3>{{ article.title }}</h3>
        </router-link>
        <p class="create-time">发布时间：{{ article.createTime }}</p>
      </div>

      <div v-if="articleList.length === 0 && !loading" class="empty">
        <p>该分类下暂无文章</p>
      </div>

      <div v-if="loading" class="loading">加载中...</div>

      <div class="pagination" v-if="total > 0">
        <button
          @click="changePage(currentPage - 1)"
          :disabled="currentPage === 1"
        >
          上一页
        </button>
        <span>第 {{ currentPage }} 页 / 共 {{ totalPage }} 页</span>
        <button
          @click="changePage(currentPage + 1)"
          :disabled="currentPage === totalPage"
        >
          下一页
        </button>
      </div>
    </div>
    <div class="left">
      <Title-view></Title-view>
      <Tage-view></Tage-view>
    </div>
  </div>
</template>

<script>
import TitleView from "../components/TitleView.vue";
import TageView from "../components/TageView.vue";
export default {
  components: {
    TitleView,
    TageView,
  },
  data() {
    return {
      currentCategoryId: "",
      currentCategoryName: "",

      articleList: [],
      total: 0,
      currentPage: 1,
      pageSize: 10,
      loading: false,
    };
  },

  created() {
    this.currentCategoryId = this.$route.query.id;
    this.currentCategoryName = this.$route.query.name || "未知分类";
    this.getArticleList();
  },

  computed: {
    totalPage() {
      return Math.ceil(this.total / this.pageSize);
    },
  },

  methods: {
    async getArticleList() {
      this.loading = true;
      try {
        const res = await this.$axios.post("/api/category/article/list", {
          categoryId: this.currentCategoryId,
          current: this.currentPage,
          size: this.pageSize,
        });
        console.log("接口原始返回：", res.data); // 打印完整响应
        if (res.data.code === 200) {
          const data = res.data.data;
          console.log("文章列表数据：", data.records); // 打印要渲染的列表
          this.articleList = data.records || []; // 确保是数组
          this.total = data.total || 0;
          this.currentPage = data.current || 1;
        } else {
          this.$message.error(res.data.msg || "获取文章失败");
          this.articleList = [];
        }
      } catch (err) {
        console.error("请求错误：", err);
        this.articleList = [];
      } finally {
        this.loading = false;
      }
    },
  },

  changePage(page) {
    if (page < 1 || page > this.totalPage) return;
    this.currentPage = page;

    this.getArticleList();
  },

  watch: {
    $route(to) {
      this.currentCategoryId = to.query.id;
      this.currentCategoryName = to.query.name || "未知分类";
      this.currentPage = 1;
      this.getArticleList();
    },
  },
};
</script>

<style scoped>
.boxs {
  width: 100%;
  height: auto;
  margin: 0 auto;
  display: flex;
  /* flex-wrap: wrap; */
  justify-content: space-around;
}
.left {
  width: 285px;
  padding: 15px;
}
.right {
  width: 900px;
}
.category-article-list {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.article-item {
  padding: 15px;
  border-bottom: 1px solid #eee;
}

.article-item:hover {
  background-color: #f9f9f9;
}

.article-item h3 {
  margin: 0 0 10px 0;
  color: #333;
}

.article-item h3:hover {
  color: #42b983;
}

.create-time {
  margin: 0;
  color: #999;
  font-size: 14px;
}

.empty {
  text-align: center;
  padding: 50px;
  color: #666;
}

.loading {
  text-align: center;
  padding: 50px;
  color: #666;
}

.pagination {
  margin: 30px 0;
  text-align: center;
}

.pagination button {
  padding: 5px 15px;
  margin: 0 10px;
  cursor: pointer;
}

.pagination button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.pagination span {
  color: #666;
}
</style>